<!--
 * @Author: Bennty
 * @Date: 2024-08-27 14:31:59
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-11-06 16:25:02
 * @Description: 请填写简介
-->
<template>
    <el-dialog v-model="props.visible" title="录入不锈钢定制单" width="30%" destroy-on-close @close="handleClose">
        <el-form :model="formData" ref="formRef" label-width="auto">
            <el-form-item label="不锈钢名称" prop="stainlessName" label-position="right">
                <el-input v-model="formData.stainlessName" disabled placeholder="请选择不锈钢辅材"></el-input>
            </el-form-item>
            <el-form-item label="关联不锈钢" label-position="right">
                <el-row :gutter="15">
                    <el-col :span="7">
                        <el-select v-model="formData.stainlessCategoriesType" filterable placeholder="请选择材料">
                            <el-option v-for="item in props.types" :key="item.id" :label="item.majorName" :value="item.majorType"></el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="7">
                        <el-select v-model="formData.stainlessSubcategoryType" filterable placeholder="请选择">
                            <el-option v-for="item in subTypeList" :key="item.id" :label="item.subclassName" :value="item.subclassType"></el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="10">
                        <el-select v-model="selectedAuxiliary" value-key="id" filterable @change="handleSelectAuxiliary" placeholder="请选择">
                            <el-option v-for="item in auxiliaryList" :key="item.id" :label="item.specsDetail" :value="item"></el-option>
                        </el-select>
                    </el-col>
                </el-row>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button  type="primary" @click="handleSubmit">确 定</el-button>
                <el-button @click="handleClose">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import type { FormInstance } from 'element-plus';
import { getSingleByTotalApi } from '@/api/sj/warehouse/typeManagement';
import { getAuxiliaryByTypeApi ,addStainlesssteelOrderApi } from '@/api/sj/warehouse/auxiliary';

const props = defineProps(['visible', 'types','data']);
const emits = defineEmits(['close','submit']);
const subTypeList = ref<any[]>([]);
const auxiliaryList = ref<any[]>([]);
const selectedAuxiliary = ref<any>();
const formRef = ref<FormInstance>();
const formData = ref({
    stainlessName: undefined,
    stainlessCategoriesType: undefined,
    stainlessSubcategoryType: undefined,
    stainlessAuxiliaryId: undefined
});

watch(()=>props.data,(newData)=>{
    formData.value.stainlessName = newData.specsDetail;
},{deep: true});

/** 获取材料小类 */
const getSubCategory = async (majorType: string) => {
    const { data } = await getSingleByTotalApi(majorType);
    subTypeList.value = data;
};

watch(()=>formData.value.stainlessCategoriesType, (newValue, oldValue)=>{
    if(newValue != oldValue){
        selectedAuxiliary.value = undefined;
        formData.value.stainlessSubcategoryType = undefined;
    };
},{deep: true});

watch(()=>formData.value.stainlessSubcategoryType, (newValue, oldValue)=>{
    if(newValue != oldValue){
        selectedAuxiliary.value = undefined;
    };
},{deep: true});

/**  查找材料小类 */
watch(()=>formData.value.stainlessCategoriesType, (newData)=>{
    if(newData){
        getSubCategory(newData);
    };
},{deep: true});

/** 根据小类查找辅材 */
watch(()=>[formData.value.stainlessCategoriesType, formData.value.stainlessSubcategoryType], async ([CategoriesType,SubcategoryType])=>{
    if(CategoriesType && SubcategoryType){
        const { data } = await getAuxiliaryByTypeApi(CategoriesType, SubcategoryType);
        auxiliaryList.value = data;
    };
},{deep: true});

/** 选择辅材时 */
const handleSelectAuxiliary = (value: any) => {
    formData.value.stainlessAuxiliaryId = value.id;
};

const handleSubmit = async () => {
    const submitData = {
        ...formData.value,
        auxiliaryId: props.data.id
    };
    const { code } = await addStainlesssteelOrderApi(submitData);
    if(code == 200){
        emits("submit", true);
        handleClose();
    }else{
        emits("submit", false);
    };
};

const handleClose = ()=>{
    emits('close');
    formRef.value?.resetFields();
    formData.value.stainlessCategoriesType = undefined;
    formData.value.stainlessSubcategoryType = undefined;
    formData.value.stainlessAuxiliaryId = undefined;
    selectedAuxiliary.value = undefined;
};

</script>

<style lang="scss" scoped>
.dialog-footer{
    display: flex;
    justify-content: center;
}
</style>